<template>
  <v-container>
        <v-row no-gutters justify="center" class="ml-10">
      <v-col cols="10">
        <v-text-field
          placeholder="搜索文章标题..."
          v-model="title"
        >
        </v-text-field>
      </v-col>
      <v-col cols="2">
        <v-chip
          width="100%"
          height="50%"
          class="mt-2"
          color="primary"
          @click="search"
          dark
          ><v-icon>fa-search</v-icon></v-chip
        >
      </v-col>
    </v-row>
     <v-row>
            <v-col
              v-for="article in articles"
              :key="article.pk"
              cols="12"
              md="6"
              class="mt-1"
            >
              <div>
                <v-card
                  height="346"
                  class="mx-auto"
                  @click="fetchDet(article.pk)"
                >
                  <v-img :src="article.fields.cover_image" height="194"></v-img>
                  <v-list-item>
                    <v-list-item-avatar
                      @click="
                        $router.push(`/creater/${article.fields.name[0]}`)
                      "
                    >
                      <v-img
                        class="elevation-6"
                        :src="article.fields.name[1]"
                      ></v-img>
                    </v-list-item-avatar>
                    <v-list-item-content>
                      <v-list-item-title class="headline">{{
                        article.fields.title
                      }}</v-list-item-title>
                      <v-list-item-subtitle>{{
                        article.fields.name[0]
                      }}</v-list-item-subtitle>
                    </v-list-item-content>
                    <v-btn color="primary">{{ article.fields.category }}</v-btn>
                  </v-list-item>

                  <v-card-text
                  >
                  {{replace(article.fields.content.slice(0, 42))+'...'}}
                  </v-card-text>
                </v-card>
              </div>
            </v-col>
          </v-row>
  </v-container>
</template>

<script>
export default {
    data() {
        return {
            articles: [],
            title:"",
        }
    },
    methods: {
        async search() {
      try {
        const res = await this.$http.get(
          `article_search/?title=${this.title}`
        );
        this.articles = res.data.list;
        this.articles.forEach(art => {
          art.fields.cover_image = require(art.fields.cover_image);
          art.fields.name[1] = require(art.fields.name[1]);
        });
      } catch (e) {
        console.log("图片获取失败");
      }
    },
    fetchDet(id) {
      this.$router.push(`/article/${id}`);
    },
    replace(str){
      let con = str.replace(/\s*/g, "");  //去掉空格
      let res =con.replace(/<[^>]+>/g, ""); //去掉所有的html标记
      let res1 = res.replace(/↵/g, "");     //去掉所有的↵符号
      let res2 = res1.replace(/[\r\n]/g, "") //去掉回车换行
      return res2
    }
    },
}
</script>

<style>

</style>